<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码和图文</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    .img{
        height: 400px;
    }
</style>
<body>
    <div class="container">
        <code>
            &lt;div&gt;
                展示div标签
            &lt;div&gt;
        </code>
        <pre class="pre-scrollable">
            <code>
                &lt;div&gt;
                    按照代码原样展示div标签
                &lt;div&gt;
            </code>
            <code>
                <var>a</var>+<var>b</var>=<var>c</var>
            </code>
            <code>
                <kbd>Ctrl</kbd>+<kbd>F5</kbd>=<kbd>强制刷新</kbd>
            </code>
            <code>
                &lt;div&gt;
                    按照代码原样展示div标签
                &lt;div&gt;
            </code>
            <code>
                &lt;div&gt;
                    按照代码原样展示div标签
                &lt;div&gt;
                <samp>
                    代码块中的文字描述
                </samp>
            </code>
        </pre>

        <img src="../img/back.jpg" alt="响应式图片" class="img img-fluid">
        <br>
        <img src="../img/head.jpg" alt="缩略图" class="img img-thumbnail float-left">
        <img src="../img/head.jpg" alt="缩略图" class="img img-thumbnail float-right">
        <div style="clear: both;"></div>
        <img src="../img/head.jpg" alt="缩略图" class="img img-thumbnai d-block mx-auto">
    </div>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.js"></script>
</body>
</html>